<template>
<div id="app">
    <BackTop></BackTop>
         <div class="layout">
        <Layout :style="{minHeight: '100vh'}">
        <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu active-name="1-2" theme="dark" width="auto" :class="menuitemClasses" accordion>
        <Submenu name="1">
            <template slot="title" >
                <Icon type="md-albums" />
                <span v-if="isCollapsed==false">
                day 01
                </span>
            </template>
        <MenuGroup title="study: webpack 打包">
                <MenuItem name="1-1">
                <router-link to="/showwork/day01">
                <Icon type="ios-archive-outline" />打包js.html,css
                </router-link>
                </MenuItem>
        </MenuGroup>
        </Submenu>
        <Submenu name="2">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-if="isCollapsed==false">
                day 02
                </span>
            </template>
            <MenuGroup title="study: vue 脚手架">
            <MenuItem name="2-1">
                <router-link to="/showwork/day02/case-tell-jokes">
                <Icon type="ios-archive-outline" /><span title="案例1 - 生成笑话">案例1 - 生成笑话</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-2">
                <router-link to="/showwork/day02/case-reword">
                <Icon type="ios-archive-outline" /><span title="案例1 - 生成笑话">案例2 - 翻转世界</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-3">
                <router-link to="/showwork/day02/case-fold">
                <Icon type="ios-archive-outline" /><span title="案例3 - 折叠面板">案例3 - 折叠面板</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-4">
                <router-link to="/showwork/day02/01-fruits">
                <Icon type="md-bookmark" /><span title="1 - 水果店">1 - 水果店</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-5">
                <router-link to="/showwork/day02/02-programa">
                <Icon type="md-bookmark" /><span title="2 - 选择栏目">2 - 选择栏目</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-6">
                <router-link to="/showwork/day02/03-showcar">
                <Icon type="md-bookmark" /><span title="3 - 汽车展示">3 - 汽车展示</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-7">
                <router-link to="/showwork/day02/04-randomhero">
                <Icon type="md-bookmark" /><span title="4 - 随机英雄">4 - 随机英雄</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-8">
                <router-link to="/showwork/day02/05-countdown">
                <Icon type="md-bookmark" /><span title="5 - 协议倒计时">5 - 协议倒计时</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-9">
                <router-link to="/showwork/day02/06-randomarr">
                <Icon type="md-bookmark" /><span title="6 - 随机数字">6 - 随机数字</span>
                </router-link>
            </MenuItem>
            <MenuItem name="2-10">
                <router-link to="/showwork/day02/07-nameflashback">
                <Icon type="md-bookmark" /><span title="7 - 名字倒叙">7 - 名字倒叙</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="3">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 03
                </span>
            </template>
            <MenuGroup title="study: 计算属性&侦听器">
            <MenuItem name="3-1">
                <router-link to="/showwork/day03/case-brandmanagement">
                <Icon type="ios-archive-outline" />
                <span title="案例1 - 品牌管理">案例1 - 品牌管理</span>
                </router-link>
            </MenuItem>
            <MenuItem name="3-2">
                <router-link to="/showwork/day03/case-Alltheselected">
                <Icon type="ios-archive-outline" />
                <span title="案例2 - 全选反选">案例2 - 全选反选</span>
                </router-link>
            </MenuItem>
            <MenuItem name="3-3">
                <router-link to="/showwork/day03/01-buyworkbook">
                <Icon type="ios-archive-outline" />
                <span title="1 - 买点书练习">1 - 买点书练习</span>
                </router-link>
            </MenuItem>
            <MenuItem name="3-4">
                <router-link to="/showwork/day03/02-CumulativeNumber">
                <Icon type="ios-archive-outline" />
                <span title="2 - 累加数字值">2 - 累加数字值</span>
                </router-link>
            </MenuItem>
            <MenuItem name="3-5">
                <router-link to="/showwork/day03/03-cutNameClass">
                <Icon type="ios-archive-outline" />
                <span title="3 - 动态切换类名">3 - 动态切换类名</span>
                </router-link>
            </MenuItem>
            <MenuItem name="3-6">
                <router-link to="/showwork/day03/04-crud">
                <Icon type="ios-archive-outline" />
                <span title="4 - 信息增删改查">4 - 信息增删改查</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="4">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 04
                </span>
            </template>
            <MenuGroup title="study: vue 组件与通信">
            <MenuItem name="4-1">
                <router-link to="/showwork/day04/1-4selldog">
                <Icon type="ios-archive-outline" />
                <span title="1 - 4 卖狗~">1 - 4 卖狗~</span>
                </router-link>
            </MenuItem>
            <MenuItem name="4-2">
                <router-link to="/showwork/day04/5-sellend">
                <Icon type="ios-archive-outline" />
                <span title="5 - 卖完了">5 - 卖完了</span>
                </router-link>
            </MenuItem>
            <MenuItem name="4-3">
                <router-link to="/showwork/day04/6-buygoodeat">
                <Icon type="ios-archive-outline" />
                <span title="6 - 买点好吃的">6 - 买点好吃的</span>
                </router-link>
            </MenuItem>
            <MenuItem name="4-4">
                <router-link to="/showwork/day04/7-buycar">
                <Icon type="ios-archive-outline" />
                <span title="7 - 购物车">7 - 购物车</span>
                </router-link>
            </MenuItem>
            <MenuItem name="4-5">
                <router-link to="/showwork/day04/8-domath">
                <Icon type="ios-archive-outline" />
                <span title="8 - 做数学题">8 - 做数学题</span>
                </router-link>
            </MenuItem>
            <MenuItem name="4-6">
                <router-link to="/showwork/day04/9-TodoList">
                <Icon type="ios-archive-outline" />
                <span title="9 - TodoList案例">9 - TodoList案例</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="5">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 05
                </span>
            </template>
            <MenuGroup title="study: 生命周期&axios库">
            <MenuItem name="5-1">
                <router-link to="/showwork/day05/1-gobuycar">
                <Icon type="ios-archive-outline" />
                <span title="1 - 购物车案例">1 - 购物车</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="6">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 06
                </span>
            </template>
            <MenuGroup title="study: 自定义指令&插槽">
            <MenuItem name="6-1">
                <router-link to="/showwork/day06/1-goodlist">
                <Icon type="ios-archive-outline" />
                <span title="1 - GoodsList商品">1 - GoodsList商品</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="7">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 07
                </span>
            </template>
            <MenuGroup title="study: 路由的使用">
            <MenuItem name="7-1">
                <router-link to="/showwork/day07/1-cutpage">
                <Icon type="ios-archive-outline" />
                <span title="1 - 切换页面">1 - 切换页面</span>
                </router-link>
            </MenuItem>
             <MenuItem name="7-2">
                <router-link to="/showwork/day07/2-nestRoute">
                <Icon type="ios-archive-outline" />
                <span title="2 - 嵌套路由">2 - 嵌套路由</span>
                </router-link>
            </MenuItem>
             <MenuItem name="7-3">
                <router-link to="/showwork/day07/3-lev3router">
                <Icon type="ios-archive-outline" />
                <span title="3 - 3级路由嵌套">3 - 3级路由嵌套</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="8">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 08
                </span>
            </template>
            <MenuGroup title="study: vuex库">
            <MenuItem name="8-1">
                <router-link to="/showwork/day08/case-vuexshopcar">
                <Icon type="ios-archive-outline" />
                <span title="1 - 案例-购物车vuex版">1 - case-vuexshopcar</span>
                </router-link>
            </MenuItem>
            <MenuItem name="8-2">
                <router-link to="/showwork/day08/vuex-TodoList">
                <Icon type="ios-archive-outline" />
                <span title="2 - vuex版todos">2 - vuex-TodoList</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="9">
            <template slot="title">
                <Icon type="md-albums" />
                <span v-show="isCollapsed==false">
                day 09
                </span>
            </template>
            <MenuGroup title="study: 组件库使用">
            <MenuItem name="9-1">
                <router-link to="/showwork/day09/1-formverify">
                <Icon type="ios-archive-outline" />
                <span title="1 - 表单校验">1 - form表单校验</span>
                </router-link>
            </MenuItem>
            <MenuItem name="9-2">
                <router-link to="/showwork/day09/2-customcolumn">
                <Icon type="ios-archive-outline" />
                <span title="2 - customcolumn">2 - customcolumn</span>
                </router-link>
            </MenuItem>
            </MenuGroup>
        </Submenu> 
        </Menu>
            </Sider>
            <Layout>
        <Content :style="{padding: '16px 16px 16px'}" id="appcontent">
                    <showwork/>
        </Content>
            </Layout>
        </Layout>
    </div>
</div>
</template>

<script>
import showwork  from './components/ShowWork.vue'
export default {
  name: 'App',
  data(){
      return {
           isCollapsed: false
      }
  },
  components:{
showwork
  },
  computed: {
     menuitemClasses: function () {
     return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        }
}
</script>

<style scoped>
    .layout-con{
        height: 100%;
        width: 100%;
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
    #appcontent{
        background: url('https://s4.ax1x.com/2021/12/16/TCG99s.png') no-repeat;
        background-size: cover;
    }
    #appcard{
        border: 1px solid transparent;
        background: rgba(0, 0, 0, 0.2);
    }
    a{
        color: #fff;
    }
    .menu-item span[data-v-7ba5bd90]{
        width: 105px;
    }
</style>
